<template>
	<view :style="{ display: type != '0' ? '' : 'none' }" class="message">
		<image :src="avatar" class="avatar" mode="aspectFill" alt="" />
		<view class="">
			<view class="name" style="margin-bottom: 20rpx">
				{{ name }}
			</view>

			<view class="message-info">
				<view v-if="type == '1'" class="message-text">
					{{ item.message }}
				</view>
				<view v-if="type == '11'" class="message-img">
					<image style="max-width: 180rpx; height: 180rpx" :src="item.message" mode="aspectFit"
						@click="previewImage(item.message)"></image>
				</view>
				<view v-if="type == '111' && item.message != '[表情]'" class="message-bqb">
					<image style="max-width: 180rpx; height: 180rpx" :src="item.message" mode="aspectFit"></image>
				</view>
				<view v-if="type == 'order'" class="message-goods" @click="goOrder(getExtendedData(item))">
					<view class="goods-info">
						<image :src="getExtendedData(item).pic" alt=""></image>
						<view class="title">
							{{ getExtendedData(item).name }}
							<text>
								{{
									getExtendedData(item).money == 0
									? "面议"
									: "￥" + getExtendedData(item).money
								}}
							</text>
						</view>
					</view>
				</view>
				<view v-if="type == 'file'" :href="getExtendedData(item).fileUlr" target="_self" :title="item.message"
					class="file" @click="lookFile(getExtendedData(item).fileUlr)">
					<image class="model_icon" :src="getFileType(getExtendedData(item).fileUlr)" alt=""></image>
					<view>
						{{ item.message }}
					</view>
				</view>
				<view v-if="type == 'shop'" class="message-goods" @click="goShop(getExtendedData(item))">
					<view class="goods-info flex-center-1">
						<image :src="getExtendedData(item).pic" alt=""></image>
						<view class="title">
							{{ getExtendedData(item).name }}
							<text>
								{{
									getExtendedData(item).price == 0
									? "面议"
									: "￥" + getExtendedData(item).price
								}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "messageLeft",
	props: {
		type: {
			type: String,
			default: "0",
		},
		avatar: {
			type: String,
			default: "",
		},
		name: {
			type: String,
			default: "",
		},
		item: {
			type: Object,
			default: function () {
				return {};
			},
		},
	},
	data() {
		return {
			getTime: (time) => {
				var date = new Date(time);
				let Y = date.getFullYear() + "-";
				let M =
					(date.getMonth() + 1 < 10
						? "0" + (date.getMonth() + 1)
						: date.getMonth() + 1) + "-";
				let D =
					(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
				let h =
					(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
					":";
				let m =
					(date.getMinutes() < 10
						? "0" + date.getMinutes()
						: date.getMinutes()) + ":";
				let s =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return `${Y}${M}${D}${h}${m}${s}`;
			},
			getExtendedData: function (item) {
				return JSON.parse(item.extendedData);
			},
			getFileType: function (url) {
				let type = url.split(".");
				type = type[type.length - 1];
				switch (type) {
					case "doc":
						return require("@/static/img/enterpriseServer/model_word.png");
					case "docx":
						return require("@/static/img/enterpriseServer/model_word.png");
					case "ppt":
						return require("@/static/img/enterpriseServer/model_ppt.png");
					case "pptx":
						return require("@/static/img/enterpriseServer/model_ppt.png");
					case "xls":
						return require("@/static/img/enterpriseServer/model_excel.png");
					case "xlsx":
						return require("@/static/img/enterpriseServer/model_excel.png");
					case "xlsm":
						return require("@/static/img/enterpriseServer/model_excel.png");
					case "pdf":
						return require("@/static/img/enterpriseServer/model_pdf.png");
					case "rar":
						return require("@/static/img/enterpriseServer/model_zip.png");
					case "zip":
						return require("@/static/img/enterpriseServer/model_zip.png");
					case "7z":
						return require("@/static/img/enterpriseServer/model_zip.png");
					case "gz":
						return require("@/static/img/enterpriseServer/model_zip.png");
					case "tar":
						return require("@/static/img/enterpriseServer/model_zip.png");
					case "bz2":
						return require("@/static/img/enterpriseServer/model_zip.png");
					case "iso":
						return require("@/static/img/enterpriseServer/model_zip.png");
					default:
						return require("@/static/img/enterpriseServer/icon_xz.png");
				}
			},
		};
	},
	computed: {},
	watch: {},
	created() { },
	mounted() { },
	methods: {
		goOrder(item) {
			uni.navigateTo({
				url: "/enterpriseServer/orderDetails/index?orderNo=" + item.order_no,
			});
		},
		goShop(item) {
			uni.navigateTo({
				url: "/enterpriseServer/productInfo/index?id=" + item.id,
			});
		},
		previewImage(image) {
			uni.previewImage({
				urls: [image],
			});
		},

		lookFile(fileUlr) {
			let type = fileUlr.split(".");
			type = type[type.length - 1];
			let types = ["doc", "xls", "ppt", "pdf", "docx", "xlsx", "pptx"];
			console.log(type, fileUlr);
			if (types.indexOf(type) != -1) {
				uni.showLoading({
					title: "打开文件中",
					mask: true,
				});
				uni.downloadFile({
					url: fileUlr,
					success: function (res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function (res) {
								uni.hideLoading();
							},
							fail: function (err) {
								uni.hideLoading();
							},
						});
					},
					fail: function (err) {
						uni.hideLoading();
					},
				});
			} else {
				uni.showModal({
					title: "提示",
					content: "app不支持该格式文件预览",
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							console.log("用户点击确定");
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.message {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 50rpx;

	.avatar {
		margin-left: 34rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 25rpx;
	}
}

.message-info {
	position: relative;
	flex-wrap: wrap;
	display: flex;
	justify-content: flex-start;

	.message-text,
	.message-img,
	.message-bqb {
		padding: 20rpx 28rpx;
		max-width: 480rpx;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		border: 1rpx solid #d6d6d6;

		image {
			border-radius: 12rpx;
		}
	}

	.message-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 43rpx;
		white-space: pre-line;
		word-wrap: break-word;
	}
}

.message-goods {
	padding: 20rpx 28rpx;
	background: #ffffff;
	border-radius: 12rpx;
	border: 1rpx solid r#d6d6d6;
	width: 467rpx;
	cursor: pointer;

	.text {
		font-size: 34rpx;
		color: #333333;
	}

	.goods-info {
		width: 100%;
		height: 128rpx;
		background: #f9f9f9;
		border-radius: 8rpx;
		display: flex;
		align-items: center;

		image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 8rpx;
		}

		.title {
			padding-left: 36rpx;
			font-size: 28rpx;
			color: #666666;

			text {
				display: block;
				font-size: 28rpx;
				color: #666666;
				padding-top: 14rpx;
			}
		}
	}

	.warning {
		font-size: 28rpx;
		color: #999999;
	}
}

.file {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	padding: 26rpx 36rpx;
	padding-top: 22rpx;
	border-radius: 12rpx;
	border: 1rpx solid #d6d6d6;

	image {
		height: 100rpx;
		width: 100rpx;
		margin-right: 30rpx;
	}

	view {
		font-size: 28rpx;
		color: #666;
		width: 267rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
}
</style>
